<template>
  <div class="back-to-top" :style="positionStyle" @click="scrollToTop">
    <slot>
      <div class="default-container">↑</div>
    </slot>
  </div>
</template>

<script setup>
import { computed, watch, ref, onMounted, onUnmounted } from "vue";

const props = defineProps({
  size: {
    type: String,
    default: "normal",
    validator: (v) => ["small", "normal", "big"].includes(v),
  },
  right: {
    type: String,
    default: "40px",
  },
  bottom: {
    type: String,
    default: "40px",
  },
});

const sizeMap = {
  small: "20px",
  normal: "40px",
  big: "60px",
};

const positionStyle = computed(() => ({
  right: props.right,
  bottom: props.bottom,
  width: sizeMap[props.size],
  height: sizeMap[props.size],
}));

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>

<style scoped>
.back-to-top {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.default-container {
  font-size: 1.5em;
  font-weight: bold;
  user-select: none;
}
</style>
